<!-- svg -->
<template>
  <div class="page_container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
          <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
          <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
      </defs>
      <rect
        width="90"
        height="90"
        stroke="green"
        stroke-width="3"
        fill="yellow"
        filter="url(#f1)"
      />
    </svg>
    <svg class="svg_wrap">
      <!-- 定义箭头 -->
      <defs>
        <marker
          id="arrow"
          markerHeight="10"
          markerWidth="10"
          refX="5"
          refY="5"
          orient="auto"
        >
          <path d="M 0 0 l 10 5 l -10 5 z"></path>
        </marker>
      </defs>
      <path d="M 0 0 l 10 5 l -10 5 z" fill="black"></path>

      <line
        x1="20"
        y1="20"
        x2="50"
        y2="20"
        stroke="red"
        stroke-width="2"
        marker-end="url(#arrow)"
      >
        <!-- <animatie attributeName="x2" values="50, 100, 50" dur="10s"></animatie> -->
      </line>
      <line
        x1="20"
        y1="20"
        x2="20"
        y2="50"
        stroke="red"
        stroke-width="2"
        marker-end="url(#arrow)"
      ></line>

      <defs>
        <radialGradient
          id="Gradient"
          cx="0.25"
          cy="0.25"
          fx="0.5"
          fy="0.5"
          spreadMethod="reflect"
        >
          <stop offset="0%" stop-color="red"></stop>
          <stop offset="100%" stop-color="green"></stop>
        </radialGradient>
      </defs>
      <rect
        x="100"
        y="100"
        width="100"
        height="100"
        fill="url(#Gradient)"
      ></rect>
      <path
        id="customPath"
        fill="none"
        stroke="red"
        stroke-width="1"
        d="M20 20 C 30 50 90 50 180 20"
      ></path>
      <text text-anchor="start" x="10" y="10">
        <textPath xlink:href="#customPath">
          HELLOW
          <tspan font-weight="blod" fill="red">WORLD</tspan>
        </textPath>
      </text>
      <circle cx="100" cy="0" r="3" fill="black"></circle>
      <rect
        x="20"
        y="0"
        width="20"
        height="20"
        transform="translate(100,0) rotate(45)"
      />

      <defs>
        <linearGradient id="Gradient1">
          <stop offset="0" stop-color="white" stop-opacity="0"></stop>
          <stop offset="1" stop-color="white" stop-opacity="1"></stop>
        </linearGradient>

        <mask id="Mask1">
          <rect width="100" height="100" fill="url(#Gradient1)"></rect>
        </mask>
      </defs>

      <rect
        x="200"
        y="200"
        width="200"
        height="200"
        fill="url(#Gradient1)"
      ></rect>
      <rect x="10" y="10" width="200" height="200" mask="url(#Mask1)"></rect>
      <rect
        x="0"
        y="0"
        width="100"
        height="100"
        fill="red"
        mask="url(#Mask1)"
      />
    </svg>

    <svg
      width="200"
      height="200"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="200" height="200" fill="blue" />
      <circle
        cx="100"
        cy="100"
        r="50"
        stroke="yellow"
        stroke-width="40"
        stroke-opacity=".5"
        fill="red"
      />
    </svg>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.page_container {
  background: #eee;
  height: 100%;
  overflow: auto;
}

.dark {
  .page_container {
    background: var(--el-menu-bg-color);
  }
}
.svg_wrap {
  width: 100%;
  height: 600px;
}
</style>
